<template>
	<div class="word-details">
		<van-nav-bar :border="false" placeholder fixed title="开始背单词" left-arrow @click-left="onBack">
		</van-nav-bar>
		<div class="info" v-if="wordList">
			<div class="timer" v-if="userWordsInfo">
				<div class="margin-right-xs flex align-center">
					<img class="tips" src="@/assets/word/tips.png" />
					<span class="text-black" v-if="userWordsInfo.today_count==0">今日计划已完成</span>
					<span class="text-black" v-else>今日需新学
						<span class="text-green text-lg">{{userWordsInfo.today_count}}</span>
					</span>
				</div>
			</div>
			<div>
				<div class="text-xsl text-bold text-center">
					{{ wordList?.[0]?.wordsInfo?.words }}
				</div>
				<div class="text-center text-gray text-bold-sm margin-top-xs text-df">
					[{{ wordList?.[0]?.wordsInfo?.symbol }}]
				</div>
				<div class="flex justify-center margin-top-sm">
					<div class="play" @click="onPlay">
						<img src="@/assets/word/sound.png" class="sound" alt="" v-if="isShow" />
						<img src="@/assets/word/sound.gif" class="gif" alt="" v-else />
						<audio ref="audioRef" :src="wordList?.[0]?.wordsInfo?.wordFile" @ended="ended" @play="play" />
					</div>
				</div>
			</div>
			<div class="word-list">
				<div class="word-list-item margin-top-xs" v-for="(item,index) in wordList?.[0]?.list" :key="index"
					@click="onMean(item.pretations, index, item)">
					<span
						:class="[selectIndex == index && isFlag == 1 ? 'correct': '', selectIndex == index && isFlag == 2 ? 'wrong': '']">
						{{ item.pretations }}
					</span>
					<div class="icon">
						<img src="@/assets/word/d.png" class="sound" alt=""
							v-if="selectIndex == index && isFlag == 1" />
						<img src="@/assets/word/c.png" class="sound" v-if="selectIndex == index && isFlag == 2"
							alt="" />
					</div>
				</div>
			</div>
			<!-- <div class="word-mean" >
             <div class="word-mean-item" v-for="item in wordList?.[0].list" :style="{ background: `url(${item.wordPic})` }" @click="onMean(item.pretations)">
                <div class="word-mean-bg text-df">{{ item.pretations }}</div>
             </div>
          </div> -->
			<audio ref="musicRef" :src="audioSrc" @play="onMusic" @ended="endMusic"></audio>
		</div>
	</div>
</template>
<script setup>
	import {
		useRouter,
		useRoute
	} from "vue-router";
	import {
		onMounted,
		ref,
		watch,
		computed,
		nextTick
	} from "vue";
	import {
		request
	} from "@/api/request";
	import {
		showToast
	} from "vant"
	const router = useRouter();
	const route = useRoute();
	const wordList = ref([]);
	const audioRef = ref();
	const isShow = ref(true);
	const current = ref(0);
	const selectIndex = ref(0);
	const isFlag = ref(0)
	const isIcon = ref()
	const musicRef = ref()
	const userWordsInfo = ref();
	onMounted(() => {
		getData()
	});
	const audioSrc = computed(() => {
		if (isFlag.value == 1) {
			return new URL("@/assets/word/d.wav", import.meta.url).href
		} else if (isFlag.value == 2) {
			return new URL("@/assets/word/c.mp3", import.meta.url).href
		}
	})
	const getData = () => {
		current.value = localStorage.getItem("recitingWordCurrent")
		request({
			url: `https://d-xueer.bigchun.com/api/reciting/index`,
			method: 'get'
		}).then(res => {
			userWordsInfo.value = res.data;
			if (+current.value > +res.data.plan_count) {
				router.replace("/word");
			} else {
				getwordslist(res.data.version_full_name_id)
			}
		})
	};
	const getwordslist = (versionId) => {
		let current = localStorage.getItem('recitingWordCurrent')
		showLoadingToast({
			message: "加载中...",
			forbidClick: true,
			duration: 30000,
		});
		request({
			url: `https://d-xueer.bigchun.com/api/reciting/getwordslist`,
			method: 'get'
		}, {
			query: {
				versionId: versionId,
				page: current,
				limit: 1,
			}
		}).then(res => {
			closeToast();
			wordList.value = res.data
		})
	}

	const ended = (val) => {
		isShow.value = true;
	};
	const onMusic = () => {
		musicRef.value.play()
	}
	const endMusic = () => {
		if (isFlag.value == 1) {
			current.value++;
			isFlag.value = 0
			localStorage.setItem("recitingWordCurrent", current.value)
			getData()
		}
		if (isFlag.value == 2) {
			isFlag.value = 0
			router.push("/word/continue-word?words_id=" + wordList.value[0].wordsInfo.dId + "&versionId=" + wordList
				.value[0].wordsInfo.versionId);
		}
	}
	const play = () => {
		isShow.value = false;
	};
	const onPlay = () => {
		audioRef.value.play();
	};


	const onSubMit = async (item) => {
		request({
			url: `https://d-xueer.bigchun.com/api/reciting/selectData`,
			method: 'post'
		}, {
			data: {
				did: item.dId,
				id: item.wId
			}
		}).then(res => {

		})
	}

	const onMean = (val, index, item) => {
		selectIndex.value = index
		if (wordList.value[0].wordsInfo.pretations == val) {
			isFlag.value = 1
			onSubMit(item)
		} else {
			isFlag.value = 2
		}
		nextTick(() => {
			onMusic()
		})
	};
	const onBack = () => {
		router.back();
	};
</script>

<style lang="scss" scoped>
	@import './style/icon.scss';
	@import './style/index.scss';
	@import './style/main.scss';

	:deep(.van-nav-bar) {
		color: #000;
		background: #fff;
	}

	:deep(.van-icon-arrow-left) {
		color: #000 !important;
		font-size: 20px;
	}

	:deep(.van-nav-bar__title) {
		font-size: 18px;
		font-weight: 500;
		color: #000;
	}

	:deep(.van-tab__text) {
		font-size: 16px;
	}

	.tips {
		width: 14px;
		height: 14px;
		margin-right: 10px;
	}

	.timer {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 28px;
		font-size: 14px;
		font-weight: 500;
		background-color: rgba(12, 183, 108, 0.1);
	}

	.word-details {
		height: 100vh;

		// padding: 0 10px 30px;
		.info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: calc(100% - 100px);
		}

		.play {
			width: 40px;
			height: 40px;
		}

		.sound {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}

		.gif {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}

		.mean {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 108px;
			gap: 10px;
			margin-top: 40px;

			&-item {
				position: relative;
				background-repeat: no-repeat;
				background-size: cover;
				border-radius: 10px;
				height: 108px;

				&-word {
					height: 30px;
					width: 100%;
					position: absolute;
					background-color: rgba($color: #000000, $alpha: 0.5);
					bottom: 0;
					border-radius: 10px;
					text-align: center;
					color: #fff;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		.action {
			margin-left: 16px;
		}

		.pic {
			width: 100%;
			height: 180px;
			object-fit: cover;
			border-radius: 10px;
			margin-top: 40px;
			// margin-left: 30px;
			// margin-right: 30px;
			// padding: 0 20px;
			// margin: 40px 20px 20px 10px;
		}

		.sentence {
			line-height: 28px;
		}

		.back {
			display: flex;
			flex-direction: column;
			margin: 20px 0 34px 0;

			bottom {
				padding: 0;
			}
		}

		.word-list {
			// margin-top: 40px;
		}

		.word-list-item {
			position: relative;
			bottom: 20px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 44px;
			border-radius: 20px;
			font-size: 16px;
			padding: 0 20px;
			margin: 10px;
			background: #f5f5f5;

			.icon {
				width: 20px;
				height: 20px;

				img {
					object-fit: cover;
				}
			}
		}

		.wrong {
			color: red;
		}

		.correct {
			color: #0CB76C;
		}

		.word-mean {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-auto-rows: 108px;
			gap: 10px;
			position: relative;
			bottom: 10px;
		}

		.word-mean-item {
			height: 110px;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			border-radius: 10px;
			position: relative;

			.word-mean-bg {
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 32px;
				background-color: rgba($color: #000000, $alpha: 0.5);
				border-radius: 10px;
				text-align: center;
				color: #fff;
				line-height: 32px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				text-overflow: ellipsis;
				overflow: hidden;
				padding: 0 5px;
			}
		}
	}
</style>